<!--
 * @Descripttion:
 * @version:
 * @Author: sueRimn
 * @Date: 2020-10-22 11:41:46
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-11-13 16:05:11
-->
<template>
  <div class="app-container">

    <div class="content_box">
      <div class="leftActive">
        <el-menu
          :default-active="step"
          class="el-menu-vertical-demo"
          @select="handleSelect"
        >
          <el-menu-item index="1">
            <span slot="title">欢迎页设置</span>
          </el-menu-item>
          <el-menu-item index="2" :disabled="step2IsShow">
            <span slot="title">题型设置</span>
          </el-menu-item>

          <el-menu-item index="3" :disabled="step3IsShow">
            <span slot="title">报告设置</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="cententBody">
        <!-- 步骤1 -->
        <div v-show="step === '1'" class="left_from">
          <el-form
            ref="ruleForm"
            :model="form"
            :rules="rules"
            label-width="150px"
            label-position="left"
          >
            <el-form-item label="调研/评测对象:">
              <el-radio-group v-model="form.face">
                <el-radio :label="'1'">学生</el-radio>
                <el-radio :label="'2'">家长</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="问卷类型:">
              <el-radio-group v-model="form.type">
                <el-radio :label="'1'">调查问卷</el-radio>
                <el-radio :label="'2'">试题试卷</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="标题" prop="group_name">
              <el-input
                v-model="form.group_name"
                placeholder="请输入问卷标题"
              />
            </el-form-item>
            <el-form-item label="学校/机构简介:" prop="school_description">
              <el-input
                v-model="form.school_description"
                type="textarea"
                placeholder="请输入学校/机构简介"
                :rows="4"
              />
            </el-form-item>
            <el-form-item label="上传配图:">
              <upload
                ref="upload3"
                :config="config2"
                upload-id="uploadId5"
                :urlnow="{url:form.picture}"
                @filepath="filepath2(arguments)"
              />
            </el-form-item>
            <div class="textTips">
              请上传宽高比例为16:9的图片,以达到最佳预览效果
            </div>
            <el-form-item label="上传视频:">
              <upload
                ref="upload4"
                :config="config3"
                upload-id="uploadId6"
                :urlnow="{url:form.video}"
                @filepath="filepath3(arguments)"
              />
            </el-form-item>
            <div class="textTips">
              请上传宽高比例为16:9的视频,以达到最佳预览效果
            </div>
            <el-form-item label="调研/评测内容简介:" prop="group_description">
              <el-input
                v-model="form.group_description"
                type="textarea"
                placeholder="请输入调研/评测内容简介"
                :rows="4"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="onSubmit('ruleForm')"
              >下一步</el-button>
              <el-button @click="yuLan('ruleForm')">预览</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 步骤2 题目/ 组卷-->
        <div v-show="step === '2'" class="left_from">
          <el-container>
            <!-- 左侧新增选项 -->
            <el-aside width="170px">
              <div style="margin-bottom: 20px">
                <el-button
                  :type="addType == 1 ? 'primary' : ''"
                  @click="selectAddType(1)"
                >添加选择题</el-button>
              </div>
              <div>
                <el-button
                  :type="addType == 2 ? 'primary' : ''"
                  @click="selectAddType(2)"
                >添加填空题</el-button>
              </div>
            </el-aside>
            <el-main style="padding: 0">
              <!-- 选择题 -->
              <template v-if="addType == 1">
                <el-form
                  :model="addchoicefrom"
                  label-width="100px"
                  label-position="left"
                >
                  <el-form-item label="选择题类型:">
                    <el-radio-group
                      v-model="addchoicefrom.type"
                      @change="questionCaseChange"
                    >
                      <el-radio :label="1">单选题</el-radio>
                      <el-radio :label="2">多选题</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-form>
                <div class="add_question_box">
                  <el-form
                    ref="addchoicefrom"
                    :model="addchoicefrom"
                    label-width="60px"
                    label-position="left"
                  >
                    <el-form-item label="题目">
                      <el-input
                        v-model="addchoicefrom.title"
                        type="textarea"
                        placeholder="请输入题目"
                        :rows="4"
                      />
                    </el-form-item>
                    <el-form-item
                      v-for="(item, index) in addchoicefrom.options"
                      :key="index"
                      :label="'选项' + (index + 1)"
                    >
                      <div class="newInputRow">
                        <div v-if="item.is_other && item.is_other === 1">
                          其他(用户自行输入)
                        </div>
                        <div v-else>
                          <el-input
                            v-model="item.option"
                            placeholder="请输入选项"
                            style="width: 300px"
                          />
                        </div>
                        <div class="iconBtn">
                          <el-tooltip
                            class="item"
                            effect="dark"
                            content="置顶"
                            placement="top"
                          >
                            <i
                              class="el-icon-upload2 iconBtn_item"
                              @click="inputRowTop(addchoicefrom.options, index)"
                            />
                          </el-tooltip>
                          <el-tooltip
                            class="item"
                            effect="dark"
                            content="向上移动"
                            placement="top"
                          >
                            <i
                              class="el-icon-caret-top iconBtn_item"
                              @click="inputRowUp(addchoicefrom.options, index)"
                            />
                          </el-tooltip>
                          <el-tooltip
                            class="item"
                            effect="dark"
                            content="向下移动"
                            placement="top"
                          >
                            <i
                              class="el-icon-caret-bottom iconBtn_item"
                              @click="
                                inputRowDown(addchoicefrom.options, index)
                              "
                            />
                          </el-tooltip>
                          <el-tooltip
                            class="item"
                            effect="dark"
                            content="删除选项"
                            placement="top"
                          >
                            <i
                              class="el-icon-delete iconBtn_item"
                              @click="addchoicefrom.options.splice(index, 1)"
                            />
                          </el-tooltip>
                        </div>
                      </div>
                    </el-form-item>
                  </el-form>
                  <div class="editGroud">
                    <div class="optionsBtn">
                      <el-link
                        class="optionsBtn_item"
                        icon="el-icon-circle-plus"
                        @click="addchoicefrom.options.push({ option: '' })"
                      >添加选项</el-link>
                      <el-link
                        class="optionsBtn_item"
                        icon="el-icon-circle-plus"
                        @click="
                          addchoicefrom.options.push({
                            option: '0',
                            is_other: 1,
                          })
                        "
                      >添加其他选项</el-link>
                      <el-link
                        v-if="form.type == 2"
                        class="optionsBtn_item"
                        icon="el-icon-circle-plus"
                        @click="isShowBlank = true"
                      >打开题库</el-link>
                    </div>
                    <div class="add_btnGround">
                      <el-button
                        size="small"
                        @click="addType = 0"
                      >取消新增</el-button>
                      <el-button
                        type="primary"
                        size="small"
                        @click="addQuestionItem(addchoicefrom)"
                      >确认新增</el-button>
                    </div>
                  </div>
                </div>
              </template>
              <!-- 填空题 -->
              <template v-if="addType == 2">
                <div class="add_question_box">
                  <el-form
                    ref="addcompletionfrom"
                    :model="addcompletionfrom"
                    label-width="60px"
                    label-position="left"
                  >
                    <el-form-item label="题目">
                      <el-input
                        v-model="addcompletionfrom.title"
                        type="textarea"
                        placeholder="请输入题目"
                        :rows="4"
                      />
                    </el-form-item>
                    <el-form-item
                      v-for="(item, index) in addcompletionfrom.options"
                      :key="index"
                      :label="'填空' + (index + 1)"
                    >
                      <div class="newInputRow">
                        <div>
                          <el-input
                            placeholder="请输入答案"
                            style="width: 400px"
                          />
                        </div>
                        <div class="iconBtn">
                          <!-- <el-tooltip class="item" effect="dark" content="置顶" placement="top">
                            <i class="el-icon-upload2 iconBtn_item" @click="inputRowTop(addcompletionfrom.options,index)" />
                          </el-tooltip>
                          <el-tooltip class="item" effect="dark" content="向上移动" placement="top">
                            <i class="el-icon-caret-top iconBtn_item" @click="inputRowUp(addcompletionfrom.options,index)" />
                          </el-tooltip>
                          <el-tooltip class="item" effect="dark" content="向下移动" placement="top">
                            <i
                              class="el-icon-caret-bottom iconBtn_item"
                              @click="inputRowDown(addcompletionfrom.options,index)"
                            />
                          </el-tooltip>-->
                          <el-tooltip
                            class="item"
                            effect="dark"
                            content="删除选项"
                            placement="top"
                          >
                            <i
                              class="el-icon-delete iconBtn_item"
                              @click="
                                addcompletionfrom.options.splice(index, 1)
                              "
                            />
                          </el-tooltip>
                        </div>
                      </div>
                    </el-form-item>
                  </el-form>
                  <div class="editGroud">
                    <div class="optionsBtn">
                      <el-link
                        class="optionsBtn_item"
                        icon="el-icon-circle-plus"
                        style="visibility: hidden"
                      >添加其他选项</el-link>
                      <el-link
                        class="optionsBtn_item"
                        icon="el-icon-circle-plus"
                        @click="
                          addcompletionfrom.options.push({ option: 'null' })
                        "
                      >添加选项</el-link>
                      <el-link
                        v-if="form.type == 2"
                        class="optionsBtn_item"
                        icon="el-icon-circle-plus"
                        @click="isShowBlank = true"
                      >打开题库</el-link>
                    </div>
                    <div class="add_btnGround">
                      <el-button
                        size="small"
                        @click="addType = 0"
                      >取消新增</el-button>
                      <el-button
                        type="primary"
                        size="small"
                        @click="addQuestionItem(addcompletionfrom)"
                      >确认新增</el-button>
                    </div>
                  </div>
                </div>
              </template>
              <!-- 显示题目列表 -->
              <div>
                <div
                  v-for="(quesItem, quesIndex) in questionList"
                  :key="quesIndex"
                  class="questionList"
                >
                  <div class="question_type">
                    {{
                      quesItem.question_case == 1
                        ? "单选题"
                        : quesItem.question_case == 2
                          ? "多选题"
                          : "填空题"
                    }}
                  </div>
                  <div class="question_title">
                    {{ quesIndex + 1 }}.{{ quesItem.content }}
                  </div>
                  <template v-if="quesItem.question_case == 3">
                    <div
                      v-for="(opsItem, opsIndex) in quesItem.options"
                      :key="opsIndex"
                      class="question_item"
                    >
                      <span style="color:#969292;font-weight:600">选项{{ opsIndex+1 }}：</span>
                      <el-input placeholder="请输入答案" style="width: 400px" />
                    </div>
                  </template>
                  <template v-else>
                    <div
                      v-for="(opsItem, opsIndex) in quesItem.options"
                      :key="opsIndex"
                      class="question_item"
                    >
                      <span style="color:#969292;font-weight:600">选项{{ opsIndex+1 }}：</span>
                      <template v-if="opsItem.is_other == 1">
                        其他：
                        <el-input
                          placeholder="请输入其他内容"
                          style="width: 400px"
                        />
                      </template>
                      <template v-else>{{ opsItem.option }}</template>
                    </div>
                  </template>
                  <div class="question_selectBox">
                    <div @click="changeIndex(quesIndex, 'top')">顶置</div>
                    <div @click="changeIndex(quesIndex, 'up')">上移</div>
                    <div @click="changeIndex(quesIndex, 'down')">下移</div>
                    <div @click="editQuestion(quesItem, quesIndex)">编辑</div>
                    <div @click="delectQuestion(quesItem, quesIndex)">删除</div>
                  </div>
                  <div style="clear: both" />
                  <el-divider />
                </div>
              </div>
              <div class="next">
                <el-button type="primary" @click="xiaYiBu">下一步</el-button>
              </div>
              <!-- //编辑弹窗-->
              <el-dialog
                title="编辑"
                :visible.sync="dialogTableVisible"
                width="750px"
              >
                <!-- 选择题 -->
                <template
                  v-if="
                    editChoiceForm.question_case == 1 ||
                      editChoiceForm.question_case == 2
                  "
                >
                  <el-form
                    :model="editChoiceForm"
                    label-width="100px"
                    label-position="left"
                  >
                    <el-form-item label="选择题类型:">
                      <el-radio-group v-model="editChoiceForm.question_case">
                        <el-radio :label="1">单选题</el-radio>
                        <el-radio :label="2">多选题</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-form>
                  <div class="add_question_box">
                    <el-form
                      ref="editChoiceForm"
                      :model="editChoiceForm"
                      label-width="60px"
                      label-position="left"
                    >
                      <el-form-item label="题目">
                        <el-input
                          v-model="editChoiceForm.content"
                          type="textarea"
                          placeholder="请输入题目"
                          :rows="4"
                        />
                      </el-form-item>
                      <el-form-item
                        v-for="(item, index) in editChoiceForm.options"
                        :key="index"
                        :label="'选项' + (index + 1)"
                      >
                        <div class="newInputRow">
                          <div v-if="item.is_other && item.is_other === 1">
                            其他(用户自行输入)
                          </div>
                          <div v-else>
                            <el-input
                              v-model="item.option"
                              placeholder="请输入选项"
                              style="width: 300px"
                            />
                          </div>
                          <div class="iconBtn">
                            <el-tooltip
                              class="item"
                              effect="dark"
                              content="置顶"
                              placement="top"
                            >
                              <i
                                class="el-icon-upload2 iconBtn_item"
                                @click="
                                  inputRowTop(editChoiceForm.options, index)
                                "
                              />
                            </el-tooltip>
                            <el-tooltip
                              class="item"
                              effect="dark"
                              content="向上移动"
                              placement="top"
                            >
                              <i
                                class="el-icon-caret-top iconBtn_item"
                                @click="
                                  inputRowUp(editChoiceForm.options, index)
                                "
                              />
                            </el-tooltip>
                            <el-tooltip
                              class="item"
                              effect="dark"
                              content="向下移动"
                              placement="top"
                            >
                              <i
                                class="el-icon-caret-bottom iconBtn_item"
                                @click="
                                  inputRowDown(editChoiceForm.options, index)
                                "
                              />
                            </el-tooltip>
                            <el-tooltip
                              class="item"
                              effect="dark"
                              content="删除选项"
                              placement="top"
                            >
                              <i
                                class="el-icon-delete iconBtn_item"
                                @click="edit_dele(index)"
                              />
                            </el-tooltip>
                          </div>
                        </div>
                      </el-form-item>
                    </el-form>
                    <div class="editGroud">
                      <div class="optionsBtn">
                        <el-link
                          class="optionsBtn_item"
                          icon="el-icon-circle-plus"
                          @click="editChoiceForm.options.push({ option: '' })"
                        >添加选项</el-link>
                        <el-link
                          class="optionsBtn_item"
                          icon="el-icon-circle-plus"
                          @click="
                            editChoiceForm.options.push({
                              option: '0',
                              is_other: 1,
                            })
                          "
                        >添加其他选项</el-link>
                      </div>
                      <div class="add_btnGround">
                        <el-button
                          size="small"
                          @click="dialogTableVisible = false"
                        >取消编辑</el-button>
                        <el-button
                          type="primary"
                          size="small"
                          @click="saveEdit"
                        >确认修改</el-button>
                      </div>
                    </div>
                  </div>
                </template>
                <!-- 填空题 -->
                <template v-if="editChoiceForm.question_case == 3">
                  <div class="add_question_box">
                    <el-form
                      ref="addcompletionfrom"
                      :model="addcompletionfrom"
                      label-width="60px"
                      label-position="left"
                    >
                      <el-form-item label="题目">
                        <el-input
                          v-model="editChoiceForm.content"
                          type="textarea"
                          placeholder="请输入题目"
                          :rows="4"
                        />
                      </el-form-item>
                      <el-form-item
                        v-for="(item, index) in editChoiceForm.options"
                        :key="index"
                        :label="'填空' + (index + 1)"
                      >
                        <div class="newInputRow">
                          <div>
                            <el-input
                              placeholder="请输入答案"
                              style="width: 400px"
                            />
                          </div>
                          <div class="iconBtn">
                            <el-tooltip
                              class="item"
                              effect="dark"
                              content="删除选项"
                              placement="top"
                            >
                              <i
                                class="el-icon-delete iconBtn_item"
                                @click="edit_dele(index)"
                              />
                            </el-tooltip>
                          </div>
                        </div>
                      </el-form-item>
                    </el-form>
                    <div class="editGroud">
                      <div class="optionsBtn">
                        <el-link
                          class="optionsBtn_item"
                          icon="el-icon-circle-plus"
                          style="visibility: hidden"
                        >添加其他选项</el-link>
                        <el-link
                          class="optionsBtn_item"
                          icon="el-icon-circle-plus"
                          @click="
                            editChoiceForm.options.push({ option: 'null' })
                          "
                        >添加选项</el-link>
                      </div>
                      <div class="add_btnGround">
                        <el-button
                          size="small"
                          @click="addType = 0"
                        >取消编辑</el-button>
                        <el-button
                          type="primary"
                          size="small"
                          @click="saveEdit"
                        >确认修改</el-button>
                      </div>
                    </div>
                  </div>
                </template>
              </el-dialog>
            </el-main>
          </el-container>
        </div>
        <!-- 报告设置 -->
        <report v-if="step === '3'" :group_id="form.unid" class="left_from2" />
      </div>

      <!-- 手机预览 -->
      <div v-if="step === '1'" class="rightBox">
        <Phone :show_url="yuLanUrl" :ischangebtn="false" />
      </div>
      <div v-if="isShowBlank&&step === '2'" class="rightBox">
        <QuestionBank
          :question-type="questionType"
          @addQuestion="addQuestion"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Phone from '@/components/Phone'
import QuestionBank from '@/components/QuestionBank'
import {
    addGroup,
    saveQuestionItem,
    getEditQuestionInfos,
    deleteQuestionInfos,
    deleteQuestionOption,
    addQuestionGroup,
    getQuestionOption
} from '@/api/question'
import { questionSort, getGroupSingle } from '@/api/paper'
import upload from '@/components/upload/index'
import { uploadConfig2 } from '@/components/upload/config/upload1'
import { uploadConfig3 } from '@/components/upload/config/upload2'
import report from './report'
import { DebounceBy } from '@/utils/shake'
const Global = require('../../../../env/index')

function nbsp2Space(str) {
    //  转成空格
    var arrEntities = {
        nbsp: ' '
    }
    return str.replace(/&(nbsp);/gi, function(all, t) {
        return arrEntities[t]
    })
}

function removeHtmlTab(tab) {
    return tab.replace(/<[^<>]+?>/g, '') // 删除所有HTML标签
}
export default {
    name: 'ProjectAdd',
    components: {
        Phone,
        upload,
        QuestionBank,
        report
    },
    data() {
        return {
            // 上传图片参数
            config2: uploadConfig2,
            config3: uploadConfig3,
            filepath2li: [],
            filepath3li: [],
            step: '1', // 步骤
            // 欢迎页新增
            form: {
                face: '1',
                type: '1',
                group_name: '',
                school_description: '',
                group_description: '',
                picture: '', // 图片
                video: '' // 视频
            },
            yuLanUrl: '', // 预览路径
            // 验证规则
            rules: {
                group_name: [
                    {
                        required: true,
                        message: '请输入问卷标题',
                        trigger: 'blur'
                    },
                    {
                        min: 4,
                        message: '长度在 4 个字符以上',
                        trigger: 'blur'
                    }
                ],
                school_description: [
                    {
                        required: true,
                        message: '请输入学校/机构简介',
                        trigger: 'blur'
                    },
                    {
                        min: 4,
                        message: '长度在 4 个字符以上',
                        trigger: 'blur'
                    }
                ],
                group_description: [
                    {
                        required: true,
                        message: '请输入调研/评测内容简介',
                        trigger: 'blur'
                    },
                    {
                        min: 4,
                        message: '长度在 4 个字符以上',
                        trigger: 'blur'
                    }
                ]
            },
            // 新增题目
            addType: 0, // 选择新增类型 0未选 1选择 2填空
            isShowBlank: false, // 显示题库
            questionType: 1, // 题库类型
            // 选择题
            addchoicefrom: {
                type: 1, // 1单选 2多选
                title: '',
                options: [
                    {
                        option: ''
                    }
                ]
            },
            // 填空题
            addcompletionfrom: {
                type: 3, // 填空题
                title: '',
                options: [
                    {
                        option: 'null'
                    }
                ]
            },
            // 题目预览
            questionList: [],
            //   设置分数
            // 编辑弹窗
            dialogTableVisible: false,
            editChoiceForm: {},
            nowEdit: null // 正在编辑的题目下标
        }
    },
    computed: {
        step2IsShow() {
            return this.step === '1'
        },
        step3IsShow() {
            return this.step === '1' || this.step === '2'
        },
        step4IsShow() {
            return this.step === '1' || this.step === '3'
        }
    },
    created() {
        getGroupSingle({ unid: this.$route.query.groundId }).then((res) => {
            console.log(res)
            if (res.code == 200) {
                var dataForm = res.data
                this.form = {
                    unid: dataForm.unid,
                    face: dataForm.face + '',
                    type: dataForm.type + '',
                    group_name: dataForm.group_name,
                    school_description: dataForm.school_description,
                    group_description: dataForm.group_description,
                    picture: dataForm.picture, // 图片
                    video: dataForm.video // 视频
                }
                this.get_quesList()
            }
        })
    },
    methods: {
    //   添加图片调用的方法
        filepath2(param) {
            console.log('上传图片', param[0])
            this.form.picture = param[1] + param[0]
            this.filepath2li = [
                {
                    filepath: param[0]
                }
            ]
        },
        //   添加视频调用的方法
        filepath3(param) {
            this.form.video = param[1] + param[0]
            this.filepath3li = [
                {
                    filepath: param[0]
                }
            ]
        },
        // 初始化数据 将新增对应的数据置空
        initialData() {
            this.isShowBlank = false
            this.addchoicefrom = {
                type: 1, // 1单选 2多选
                title: '',
                options: [
                    {
                        option: ''
                    }
                ]
            }
            //   填空题
            this.addcompletionfrom = {
                type: 3, // 填空题
                title: '',
                options: [
                    {
                        option: 'null'
                    }
                ]
            }
        },
        // 第一步创建欢迎页
        onSubmit(formName) {
            this.$refs[formName].validate(async(valid) => {
                if (valid) {
                    addGroup(this.form).then(async(res) => {
                        if (res.code === 200) {
                            if (this.filepath2li.length != 0) {
                                await this.$refs.upload3.putFile(this.filepath2li)
                            }
                            if (this.filepath2li.length != 0) {
                                await this.$refs.upload4.putFile(this.filepath3li)
                            }
                            this.form = res.data
                            console.log('this.form>>>>>>>', this.form)
                            this.step = '2' // 下一步
                        } else {
                            this.$alert('创建失败，请重试', '提示', {
                                confirmButtonText: '确定',
                                callback: () => {}
                            })
                        }
                    })
                } else {
                    return false
                }
            })
        },
        // 预览
        yuLan(formName) {
            this.$refs[formName].validate(async(valid) => {
                if (valid) {
                    addGroup(this.form).then(async(res) => {
                        console.log('====================================')
                        console.log(res)
                        console.log('====================================')
                        if (res.code === 200) {
                            if (this.filepath2li.length != 0) {
                                await this.$refs.upload3.putFile(this.filepath2li)
                            }
                            if (this.filepath2li.length != 0) {
                                await this.$refs.upload4.putFile(this.filepath3li)
                            }
                            this.form = res.data
                            console.log('this.form>>>>>>>', this.form)
                            this.yuLanUrl =
                `${Global.ifram_url}?psq_test_id=${this.form.unid}&link_type=search&?rand=` +
                Math.round(Math.random() * 10000000)
                            //   this.yuLanUrl = `http://h5.zhizhuedu.net/?psq_test_id=${this.form.unid}&link_type=search` + Math.round(Math.random() * 10000000)
                        } else {
                            this.$alert('预览失败，请重试', '提示', {
                                confirmButtonText: '确定',
                                callback: () => {}
                            })
                        }
                    })
                } else {
                    return false
                }
            })
        },
        // 题库选择
        addQuestion(data) {
            console.log(data)
            if (data.questionType === 4) {
                this.addcompletionfrom.title = nbsp2Space(
                    removeHtmlTab(data.item.question_title)
                )
                if (data.item.answer_list.length !== 0) {
                    this.addcompletionfrom.options = []
                }
                for (let index = 0; index < data.item.answer_list.length; index++) {
                    this.addcompletionfrom.options.push({
                        option: 'null'
                    })
                }
            } else {
                this.addchoicefrom.title = nbsp2Space(
                    removeHtmlTab(data.item.question_title)
                )
                if (data.item.answer_list.length !== 0) {
                    this.addchoicefrom.options = []
                }
                for (let index = 0; index < data.item.answer_list.length; index++) {
                    const element = data.item.answer_list[index]
                    this.addchoicefrom.options.push({
                        option: nbsp2Space(removeHtmlTab(element.answer))
                    })
                }
            }
            this.isShowBlank = false
            this.$message({
                type: 'success',
                customClass: 'customClass',
                message: '导入成功!'
            })
        },
        // 新增问题选项
        // 置顶
        inputRowTop(arr, index) {
            arr.unshift(arr.splice(index, 1)[0])
        },
        // 选项向上移动
        inputRowUp(arr, index) {
            if (index !== 0) {
                arr[index] = arr.splice(index - 1, 1, arr[index])[0]
            } else {
                arr.push(arr.shift())
            }
        },
        // 选项向下移动
        inputRowDown(arr, index) {
            if (index !== arr.length - 1) {
                arr[index] = arr.splice(index + 1, 1, arr[index])[0]
            } else {
                arr.unshift(arr.splice(index, 1)[0])
            }
        },
        // 新增问题
        addQuestionItem: DebounceBy(function(addItem) {
            console.log('初始', addItem)
            if (addItem.title === '') {
                return this.$alert('问题标题不能为空', '提示', {
                    confirmButtonText: '确定',
                    callback: () => {}
                })
            }
            if (addItem.options.length === 0) {
                return this.$alert('选项不能少于1个', '提示', {
                    confirmButtonText: '确定',
                    callback: () => {}
                })
            }
            // 选择题
            if (this.addType === 1) {
                for (let index = 0; index < addItem.options.length; index++) {
                    const element = addItem.options[index]
                    if (element.option === '') {
                        return this.$alert('选择题选项不能为空', '提示', {
                            confirmButtonText: '确定',
                            callback: () => {}
                        })
                    }
                }
            }
            var copyData = JSON.parse(JSON.stringify(addItem))
            copyData.options.reverse()
            var optionsArr = []
            for (let index = 0; index < copyData.options.length; index++) {
                var element = copyData.options[index]
                element.sort = index
                optionsArr.push(element)
            }
            var addfrom = {
                group_id: this.form.unid,
                content: copyData.title,
                question_case: copyData.type,
                options: optionsArr
            }
            console.log('增加题目', addfrom)
            saveQuestionItem(addfrom).then((res) => {
                console.log(res)
                if (res.code === 200) {
                    //   this.questionList.unshift(res.data)
                    this.get_quesList()
                    this.addType = 0
                    this.initialData()
                } else {
                    this.$alert('创建失败，请重试', '提示', {
                        confirmButtonText: '确定',
                        callback: () => {}
                    })
                }
            })
        }, 1500),
        // 编辑问题
        editQuestion(item, index) {
            console.log('编辑：', item)
            this.editChoiceForm = JSON.parse(JSON.stringify(item))
            this.nowEdit = index
            this.dialogTableVisible = true
        },
        // 编辑删除子选项 不可复原
        edit_dele(index) {
            console.log(index, this.editChoiceForm.options[index])

            if (!this.editChoiceForm.options[index].unid) {
                this.editChoiceForm.options.splice(index, 1)
                return
            }
            if (this.questionList[this.nowEdit].options.length === 1) {
                return this.$alert('选择题选项不能为空', '提示', {
                    confirmButtonText: '确定',
                    callback: () => {}
                })
            }
            this.$confirm('此操作将删除该选项, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    deleteQuestionOption({
                        unid: this.editChoiceForm.options[index].unid
                    }).then((res) => {
                        if (res.code === 200) {
                            this.$message({
                                type: 'success',
                                customClass: 'customClass',
                                message: '删除成功!'
                            })
                            this.editChoiceForm.options.splice(index, 1)
                            this.questionList[this.nowEdit].options.splice(index, 1)
                        }
                    })
                })
                .catch(() => {})
        },
        // 新增子选项,先不用
        edit_addItem() {
            this.$prompt('请输入选项', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            })
                .then(({ value }) => {
                    this.$message({
                        type: 'success',
                        customClass: 'customClass',
                        message: '你的选项是: ' + value
                    })
                })
                .catch(() => {})
        },
        // 保存修改
        saveEdit() {
            if (this.editChoiceForm.content === '') {
                return this.$alert('问题标题不能为空', '提示', {
                    confirmButtonText: '确定',
                    callback: () => {}
                })
            }
            // 选择题
            if (
                this.editChoiceForm.question_case === 1 ||
        this.editChoiceForm.question_case === 2
            ) {
                for (
                    let index = 0;
                    index < this.editChoiceForm.options.length;
                    index++
                ) {
                    const element = this.editChoiceForm.options[index]
                    element.sort = this.editChoiceForm.options.length - index
                    if (element.option === '') {
                        return this.$alert('选择题选项不能为空', '提示', {
                            confirmButtonText: '确定',
                            callback: () => {}
                        })
                    }
                    if (!element.question_id) {
                        element.question_id = this.editChoiceForm.unid
                    }
                }
            }
            console.log(this.editChoiceForm)
            var copeyData = JSON.parse(JSON.stringify(this.editChoiceForm))
            copeyData.options.reverse()
            var optionsArr = []
            for (let index = 0; index < copeyData.options.length; index++) {
                var element = copeyData.options[index]
                element.sort = index
                optionsArr.push(element)
            }
            var addfrom = {
                unid: copeyData.unid,
                group_id: this.form.unid,
                content: copeyData.content,
                question_case: copeyData.question_case,
                options: optionsArr
            }
            console.log('原本选项：', addfrom)

            saveQuestionItem(addfrom).then((res) => {
                console.log('新增', res)
                if (res.code === 200) {
                    this.questionList[this.nowEdit] = copeyData
                    this.get_quesList()
                    this.dialogTableVisible = false
                    var newOption = res.data
                    getQuestionOption({ unid: addfrom.unid }).then((fenRes) => {
                        console.log('查询是否赋分选项：', fenRes)
                        if (res.code === 200 && fenRes.data.length !== 0) {
                            var element = fenRes.data[0]
                            var group_id = element.group_id
                            var question_group_id = element.unid
                            element.question_content = newOption.content
                            for (let index = 0; index < newOption.options.length; index++) {
                                const newOptionItem = newOption.options[index]
                                newOptionItem.option_score = 0
                                newOptionItem.group_id = group_id
                                newOptionItem.question_group_id = question_group_id
                                newOptionItem.option_content = newOptionItem.option
                                delete newOptionItem.question_id
                                delete newOptionItem.option
                                for (
                                    let index2 = 0;
                                    index2 < element.options.length;
                                    index2++
                                ) {
                                    const fenItem = element.options[index2]
                                    if (fenItem.unid === newOptionItem.unid) {
                                        newOptionItem.option_score = fenItem.option_score
                                    }
                                }
                            }
                            console.log('改变后：', element)
                            element.options = newOption.options
                            addQuestionGroup(element).then((addRes) => {
                                console.log(addRes)
                            })
                        } else {
                            return
                        }
                    })
                } else {
                    this.$alert('修改失败，请重试', '提示', {
                        confirmButtonText: '确定',
                        callback: () => {}
                    })
                }
            })
        },
        // 删除问题
        delectQuestion(item, index) {
            this.$confirm('此操作将删除该问题, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    deleteQuestionInfos({
                        unid: item.unid
                    }).then((res) => {
                        if (res.code === 200) {
                            this.$message({
                                type: 'success',
                                customClass: 'customClass',
                                message: '删除成功!'
                            })
                            this.questionList.splice(index, 1)
                        }
                    })
                })
                .catch(() => {})
        },
        // 选择添加题目类型
        selectAddType(index) {
            this.isShowBlank = false
            this.addType = index
            if (index === 2) {
                this.questionType = 4
            } else {
                this.questionType = 1
            }
        },
        // 选择题类型
        questionCaseChange() {
            console.log(
                'this.editChoiceForm.question_case',
                this.editChoiceForm.question_case,
                this.questionType
            )
            if (this.editChoiceForm.question_case === 1) {
                this.questionType = 1
            } else {
                this.questionType = 2
            }
        },
        // 下一步，报告
        xiaYiBu() {
            if (this.questionList.length === 0) {
                return this.$alert('题目不能为空', '提示', {
                    confirmButtonText: '确定',
                    callback: () => {}
                })
            }
            this.step = '3'
        },
        // 选择步骤
        handleSelect(key) {
            this.step = key + ''
            console.log(this.step)
        },

        handleRemove(file, fileList) {
            console.log(file, fileList)
        },
        // 更新数据
        get_quesList() {
            getEditQuestionInfos({
                group_id: this.form.unid
            }).then((res) => {
                this.questionList = res.data.reverse()
                console.log('题目列表getEditQuestionInfos', this.questionList)
            })
        },
        // 试题排序
        changeIndex(index, type) {
            switch (type) {
                case 'top':
                    var topQuestionSort = this.questionList[0].list[0].sort
                    var thisQuestion = this.questionList[index]
                    if (this.questionList[0].unid == this.questionList[index].unid) {
                        this.$alert('已经置顶', '提示', {
                            confirmButtonText: '确定',
                            callback: () => {}
                        })
                        return false
                    }
                    questionSort({
                        unid: thisQuestion.unid,
                        sort: parseInt(topQuestionSort) - 1
                    }).then((res) => {
                        if (res.code === 200) {
                            this.get_quesList()
                        } else {
                            this.$alert('置顶失败，请重试', '提示', {
                                confirmButtonText: '确定',
                                callback: () => {}
                            })
                        }
                    })
                    break
                case 'up':
                    if (index == 0) {
                        this.$alert('已经置顶', '提示', {
                            confirmButtonText: '确定',
                            callback: () => {}
                        })
                        return false
                    }
                    var upQuestionSort
                    var upQuestionSort2
                    var sortNumm
                    if ((index - 2) < 0) {
                        sortNumm = parseInt(this.questionList[index - 1].list[0].sort) - 1
                    } else {
                        upQuestionSort = this.questionList[index - 2].list[0].sort
                        upQuestionSort2 = this.questionList[index - 1].list[0].sort
                        sortNumm = (parseInt(upQuestionSort) + parseInt(upQuestionSort2)) / 2
                    }

                    var upQuestion = this.questionList[index]
                    questionSort({
                        unid: upQuestion.unid,
                        sort: sortNumm
                    }).then((res) => {
                        if (res.code === 200) {
                            this.get_quesList()
                        } else {
                            this.$alert('移动，请重试', '提示', {
                                confirmButtonText: '确定',
                                callback: () => {}
                            })
                        }
                    })
                    break
                case 'down':
                    if (index == this.questionList.length - 1) {
                        this.$alert('已经置底', '提示', {
                            confirmButtonText: '确定',
                            callback: () => {}
                        })
                        return false
                    }
                    var downQuestionSort
                    var downQuestionSort2
                    var sortNumm
                    if ((index + 2) > (this.questionList.length - 1)) {
                        sortNumm = parseInt(this.questionList[index + 1].list[0].sort) + 1
                    } else {
                        downQuestionSort = this.questionList[index + 1].list[0].sort
                        downQuestionSort2 = this.questionList[index + 2].list[0].sort
                        sortNumm = (parseInt(downQuestionSort) + parseInt(downQuestionSort2)) / 2
                    }
                    console.log('下移', sortNumm)
                    var downQuestion = this.questionList[index]
                    questionSort({
                        unid: downQuestion.unid,
                        sort: sortNumm
                    }).then((res) => {
                        if (res.code === 200) {
                            this.get_quesList()
                        } else {
                            this.$alert('下移失败，请重试', '提示', {
                                confirmButtonText: '确定',
                                callback: () => {}
                            })
                        }
                    })
                    break
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.content_box{
    width: 100%;
    display: flex;
    // min-width: 800px;
    overflow: auto;

    .leftActive{
        flex-grow:0
    }

    .cententBody{
        flex-grow:1;
        padding: 0 40px;

        .left_from{
            min-width: 500px;
            max-width: 800px;
        }
         .left_from2{
            // min-width: 800px;
            // max-width: 1680px;
            // width: 1600px;
        }
        .textTips {
            font-size: 12px;
            color: #a2a4aa;
            padding-left: 150px;
            box-sizing: border-box;
            margin-bottom: 25px;
        }

        .add_question_box {
            padding: 20px;
            background: #f5f7fa;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
            border-radius: 4px;
            min-width: 560px;
        }

        .newInputRow {
            display: flex;
            justify-content: space-between;

            .iconBtn .iconBtn_item {
            font-size: 18px;
            margin: 0 8px;
            cursor: pointer;
            }
        }

        .editGroud {
            margin-top: 30px;
            // margin-left: 400px;
            margin-right: 50px;
            width: 100%;
            text-align: right;

            .optionsBtn .optionsBtn_item {
                margin: 0 10px;
            }

            .add_btnGround {
                margin: 30px 20px 20px 20px;
                width: 150px;
                display: flex;
                justify-content: space-between;
            }
        }

        // 题目列表
        .questionList {
            margin-top: 20px;

            .question_type {
                font-size: 15px;
                font-weight: 600;
                line-height: 20px;
                color: rgba(0, 0, 0, 0.85);
            }

            .question_title {
                font-size: 15px;
                font-weight: 600;
                color: #303133;
                margin-top: 20px;
            }

            .question_item {
                font-size: 15px;
                font-weight: 400;
                color: #606266;
                margin-top: 20px;
                margin-left: 12px;
            }

            .question_selectBox {
                width: 280px;
                height: 40px;
                background: #f5f7fa;
                box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.1);
                border-radius: 4px;

                margin-top: 30px;
                margin-bottom: 30px;
                float: right;
                display: flex;
                justify-content: space-around;
                align-items: center;

                div {
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 14px;
                    color: #303133;
                    cursor: pointer;

                    &:hover {
                    color: #42b983;
                    }
                }
            }
        }

    }

    .rightBox{
        flex-grow:0
    }
}

.next {
  width: 100%;
  text-align: right;
  margin-top: 20px;
}
</style>
